import React, { useEffect, useState } from 'react';
import { Row, Col, Card, Button, Modal } from 'antd';
import { PlusSquareOutlined, WarningOutlined } from '@ant-design/icons';
import { useMappedState, useDispatch } from 'redux-react-hook';

import style from './business.module.less';

import AddForm from './AddForm';
import { PublicState } from '@@/store/reducers';
import {
  ac_get_business,
  ac_delete_business
} from '@@/store/actions';

const Business = () => {
  const [ isModalVisible, setIsModalVisible ] = useState(false);
  const business = useMappedState((state: PublicState) => state.business);
  const dispathc = useDispatch();

  /* --=====================固定状态=====================-- */
  const colSpan = 6;
  
  /* --=====================副作用=====================-- */
  // 查询会议室列表
  useEffect(() => {
    dispathc(ac_get_business())
  }, [dispathc])
  
  /* --=====================事件处理=====================-- */
  // 添加按钮点击处理
  const handleAddClick = () => {
    setIsModalVisible(true);
  }

  // 删除按钮点击处理
  const handleDeleteBtnClick = (hotel: any) => {
    Modal.confirm({
      title: '确认',
      content: `确认删除商家 ${hotel.hotelName} 吗？`,
      icon: <WarningOutlined style={{ color: '#ff4d4f' }} />,
      onOk: () => {
        dispathc(ac_delete_business({ hotelId: hotel.hotelId }, dispathc));
      }
    })
  }

  return (
    <div className={style.businessManage}>
      <div className="btn-group">
        <Button size="middle" icon={<PlusSquareOutlined />} type="primary" onClick={handleAddClick}>添加意向商家</Button>
      </div>

      {
        business.businessLoading ?
        <Card loading={business.businessLoading} ></Card>
        :
        <Row gutter={[16, 16]}>
          {business.res && business.res.message.map((hotel: any, i: number) => (
            <Col span={colSpan} key={i}>
              <Card
                loading={business.businessLoading}
                title={ hotel.hotelName }
                extra={<Button type="text" onClick={() => handleDeleteBtnClick(hotel)} danger>删除</Button>}
              ></Card>
            </Col>
          ))}
        </Row>
      }

      <AddForm visible={isModalVisible} setIsModalVisible={setIsModalVisible} />
    </div>
  )
}

export default Business